import React from "react";
// 导入组件
import { Carousel, Flex, Grid,WingBlank } from "antd-mobile";
import {API} from '../../utils/api'
// 导入图片
import Nav1 from "../../assets/images/nav-1.png";
import Nav2 from "../../assets/images/nav-2.png";
import Nav3 from "../../assets/images/nav-3.png";
import Nav4 from "../../assets/images/nav-4.png";
// 导入样式文件
// import './index.css'
import "./index.scss";
import {getCurentCity} from '../../utils'
import {BASE_URL} from '../../utils/url'
import SearchHeader from "../../components/SearchHeader";

// 导航菜单数据
const navs = [
	{
		id: 0,
		img: Nav1,
		title: "整租",
		path: "/home/list",
	},
	{
		id: 1,
		img: Nav2,
		title: "合租",
		path: "/home/list",
	},
	{
		id: 2,
		img: Nav3,
		title: "地图找房",
		path: "/map",
	},
	{
		id: 3,
		img: Nav4,
		title: "去租房",
		path: "/home/list",
	},
];
// 获取地理位置信息
navigator.geolocation.getCurrentPosition(position=>{
    console.log("当前位置信息",position);
})
class Index extends React.Component {
	state = {
		// 轮播图状态
		swipers: [],
		isSwiperLoaded: false,
		groups: [],
        // 最新资讯的数据
        news:[],
        // 当前定位城市
        curCityName:'上海'
	};
	//   获取轮播图数据的方法
	async getSwipers() {
		const res = await API.get("/home/swiper");
		this.setState({
			swipers: res.data.body,
			isSwiperLoaded: true,
		});
	}
    // 获取租房小组数据的方法
	async getGroups() {
		const res = await API.get("/home/groups", {
			params: {
				area: "AREA|88cff55c-aaa4-e2e0",
			},
		});
		this.setState({
            groups:res.data.body
        })
	}
    // 获取最新资讯的方法
    async getNews(){
        const res=await API.get("/home/news",{
            params:{
                area:"AREA|88cff55c-aaa4-e2e0"
            }
        })
        this.setState({
            news:res.data.body
        })
    }
	

	async componentDidMount() {
		//   调用请求轮播图的方法
		this.getSwipers();
		// 调用请求租房小组的方法
		this.getGroups();
        // 调用请求最新资讯的方法
        this.getNews()

		// 通过IP定位获取到当前城市名称
		const curCity = await getCurentCity()
		this.setState({
			curCityName:curCity.label
		})
	}
	// 渲染轮播图
	renderSwipers() {
		return this.state.swipers.map((item) => (
			<a
				key={item.id}
				href="http://wangxiao.zztion.com"
				style={{
					display: "inline-block",
					width: "100%",
					height: 212,
				}}
			>
				<img
					src={BASE_URL+item.imgSrc}
					alt=""
					style={{ width: "100%", verticalAlign: "top" }}
				/>
			</a>
		));
	}
	// 渲染导航菜单
	renderNavs() {
		return navs.map((item) => (
			<Flex.Item
				key={item.id}
				onClick={() => {
					this.props.history.push(item.path);
				}}
			>
				<img src={item.img} alt="" />
				<h2>{item.title}</h2>
			</Flex.Item>
		));
	}
    // 租房小组自定义布局的方法
    renderGroups(item){
        return(
            <Flex className="group-item" justify="around" key={item.id}>
				<div className="desc">
				<p className="title">{item.title}</p>
				<span className="info">{item.desc}</span>
				</div>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
			</Flex>
        )
    }
    // 渲染最新资讯
    renderNews(){
        return this.state.news.map(item=>(
            <div className="news-item" key={item.id}>
                <div className="imgWrap">
                    <img className='img' src={`http://localhost:8080${item.imgSrc}`} alt="" />
                </div>
                <Flex className='content' direction='column' justify='between'>
                    <h3 className='title'>{item.title}</h3>
                    <Flex className='info' justify='between'>
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                    </Flex>
                </Flex>
            </div>
        ))
    }

	render() {
		return (
			<div className="index">
				{/* 轮播图 */}
				<div className="swiper">
					{this.state.isSwiperLoaded ? (
						<Carousel autoplay infinite autoplayInterval="2000">
							{this.renderSwipers()}
						</Carousel>
					) : (
						""
					)}

                    {/* 搜索框 */}
					<SearchHeader cityName={this.state.curCityName} />
				</div>
				{/* 导航菜单 */}
				<Flex className="nav">{this.renderNavs()}</Flex>

				{/* 租房小组 */}
				<div className="group">
					<h3 className="title">
						租房小组
						<span>更多</span>
					</h3>
					{/* 宫格组件 */}
					<Grid
						data={this.state.groups}
						activeStyle
						columnNum="2"
                        square={false}
                        hasLine={false}
						renderItem={(item) => this.renderGroups(item)}
					/>
				</div>
                {/* 最新资讯 */}
                <div className='news'>
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size='md'>{this.renderNews()}</WingBlank>
                </div>
			</div>
		);
	}
}
export default Index;
